<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <script src="./js/flexible.js"></script>
    <link href="./css/mui.css" rel="stylesheet" type="text/css"/>
    <script src="./js/mui.min.js" type="text/javascript"></script>
    <script src="./js/serialInit.js"></script>
    <script src="./js/serialCommand.js"></script>
    <script src="./js/serialCommon.js"></script>
    <script src="./js/serialLocalStorage.js"></script>
    <script src="./js/temperatureOperate.js"></script>
    <script src="./js/serialWriteRequest.js"></script>
    <script src="./js/settingOperate.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/common.css"/>
    <link rel="stylesheet" type="text/css" href="./css/index.rem.css"/>
    <link rel="stylesheet" type="text/css" href="./swiper/swiper.min.css">
    <script src="swiper/swiper.min.js"></script>
</head>
<body>
<div class="page flex-col">
    <div class="box_1 flex-col">
        <div class="text-wrapper_1 flex-row">
            <span class="text_1">岩盤浴太空艙</span>
            <span class="text_2" id="text_2">
<!--            2030&nbsp;/&nbsp;08&nbsp;/&nbsp;21&nbsp;07:50-->
          </span>
        </div>
        <div class="group_15 flex-col">
            <div class="group_16 flex-row justify-between">
                <div class="group_1 flex-col">
                    <div class="block_5 flex-row">
                        <div class="group_3 flex-row">
                            <img
                                    class="label_1"
                                    referrerpolicy="no-referrer"
                                    src="./img/MasterDDSSlicePNG7f836d17722f4c1557086d96f95ed64f.png"
                            />
                            <span class="text_3">剩餘時間</span>
                            <div class="text-wrapper_2">
                                <span class="text_4 time-min">00</span>
                                <span class="text_5">M</span>
                                <span class="text_6">&nbsp;:&nbsp;</span>
                                <span class="text_7 time-second">00</span>
                                <span class="text_8">S</span>
                            </div>
                        </div>
                    </div>
                    <div class="block_6 flex-row">
                        <div class="image-wrapper_1 flex-col">
                            <img
                                    class="image_1"
                                    referrerpolicy="no-referrer"
                                    src="./img/MasterDDSSlicePNG5f85927524c11b6f2500a501e8babd95.png"
                            />
                            <img
                                    class="image_2"
                                    referrerpolicy="no-referrer"
                                    src="./img/MasterDDSSlicePNG87a6ca6f634d54b4e2440ab12e3b8b97.png"
                            />
                        </div>
                        <img
                                class="image_3"
                                referrerpolicy="no-referrer"
                                src="./img/MasterDDSSlicePNGc776f0da7c470aab09deb5eb1ede67ed.png"
                        />
                    </div>
                </div>
                <div class="box_7 flex-col">
                    <div class="group_6 flex-row">
                        <span class="text_9">後艙</span>
                        <div class="box_8 flex-col justify-end">
                            <span class="text_10" id="current_wendu_houcang">0</span>
                            <span class="text_11">℃</span>
                            <div class="image_4" id="image_4"></div>
                        </div>
                        <div class="box_9 flex-col">
                            <img
                                    class="label_2"
                                    referrerpolicy="no-referrer"
                                    src="./img/MasterDDSSlicePNG5b20d01266de43a72661cae336298894.png"
                                    id="houcang_up"
                            />
                            <span class="text_12" id="houcang_wendu">0</span>
                            <img
                                    class="label_3"
                                    referrerpolicy="no-referrer"
                                    src="./img/MasterDDSSlicePNGb48be9674df4ad212d0c40abdeb6f778.png"
                                    id="houcang_down"
                            />
                        </div>
                    </div>
                    <div class="group_9 flex-row">
                        <span class="text_13">前艙</span>
                        <div class="box_10 flex-col justify-end">
                            <span class="text_14" id="current_wendu_qiancang">0</span>
                            <span class="text_15">℃</span>
                            <div class="image_4" id="image_5"></div>
                        </div>
                        <div class="box_11 flex-col justify-between">
                            <div class="image-text_5 flex-col justify-between">
                                <img
                                        class="label_4"
                                        referrerpolicy="no-referrer"
                                        src="./img/MasterDDSSlicePNG5b20d01266de43a72661cae336298894.png"
                                        id="qiancang_up"
                                />
                                <span class="text-group_1" id="qiancang_wendu">0</span>
                            </div>
                            <img
                                    class="label_5"
                                    referrerpolicy="no-referrer"
                                    src="./img/MasterDDSSlicePNGb48be9674df4ad212d0c40abdeb6f778.png"
                                    id="qiancang_down"
                            />
                        </div>
                    </div>
                    <div class="group_10 flex-row">
                        <span class="text_16">岩盤</span>
                        <div class="box_12 flex-col justify-end">
                            <span class="text_17" id="current_wendu_yanpan">0</span>
                            <span class="text_18">℃</span>
                            <div class="image_4" id="image_6"></div>
                        </div>
                        <div class="box_13 flex-col justify-between">
                            <div class="image-text_6 flex-col justify-between">
                                <img
                                        class="label_6"
                                        referrerpolicy="no-referrer"
                                        src="./img/MasterDDSSlicePNG5b20d01266de43a72661cae336298894.png"
                                        id="yanpan_up"
                                />
                                <span class="text-group_2" id="yanpan_wendu">0</span>
                            </div>
                            <img
                                    class="label_7"
                                    referrerpolicy="no-referrer"
                                    src="./img/MasterDDSSlicePNGb48be9674df4ad212d0c40abdeb6f778.png"
                                    id="yanpan_down"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="image-wrapper_2 flex-row">
            <img
                    class="label_8"
                    referrerpolicy="no-referrer"
                    src="./img/MasterDDSSlicePNGa7748f7bb10e8394bd5dcd24ce0c9331.png"
                    id="shezhi"
            />
            <img
                    class="label_9 time-btn"
                    referrerpolicy="no-referrer"
                    src="./img/MasterDDSSlicePNG7acc3175baed45b54b184706764e6606.png"
            />
            <img
                    class="label_10"
                    referrerpolicy="no-referrer"
                    src="./img/MasterDDSSlicePNG2bbfb50d01c9a18f4a79525ce1feb076.png"
                    id="ad"
            />
            <img
                    class="image_9"
                    referrerpolicy="no-referrer"
                    src="./img/MasterDDSSlicePNGe56b8ee60ce43b13b2bc9061b1c4a11a.png"
            />
        </div>
    </div>
    <div class="box_1 mask to_index_mask">
       <iframe class="video_box" width="100%" height="100%"
            src="https://www.youtube.com/embed/vBoP2lyAiXQ?autoplay=1"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; autoplay"
            allowfullscreen>
    </iframe>
        <!-- <video class="video_box" src="http://mylast.video/NatiQZP" controls></video> -->
        <div class="to_index_image-wrapper_1 flex-col">
            <img
                    class="to_index"
                    referrerpolicy="no-referrer"
                    src="./img/MasterDDSSlicePNG92aa1fd784ae6f562e8f4fdb07c37cfe.png"
            />
        </div>

    </div>
    <div style="display: none" class="box_1 time-setting">
        <div class="time-box">
            <div class="text_19">時間設定</div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide time-set" data-value="10">10</div>
                    <div class="swiper-slide time-set" data-value="20">20</div>
                    <div class="swiper-slide time-set" data-value="30">30</div>
                    <div class="swiper-slide time-set" data-value="40">40</div>
                    <div class="swiper-slide time-set" data-value="50">50</div>
                    <div class="swiper-slide time-set" data-value="60">60</div>
                </div>
            </div>
            <div class="text-wrapper_3 flex-col">
                <span class="text_24">確定</span>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./js/js/echarts.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/main.js"></script>
<script>
    function addMinutesToCurrentTime(minutes) {
        const currentTime = new Date();
        const minutesToAdd = minutes;
        const newTime = new Date(
            currentTime.getFullYear(),
            currentTime.getMonth(),
            currentTime.getDate(),
            currentTime.getHours(),
            currentTime.getMinutes() + minutesToAdd,
            currentTime.getSeconds(),
            currentTime.getMilliseconds()
        );
        return newTime;
    }

    $('.time-btn').click(function (){
        $('.time-setting').show()
        const swiper = new Swiper('.swiper-container', {
            direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            slidesPerView:4
        })
    })
    let timer = null
    $('.time-set').click(function (){
        const newTime = addMinutesToCurrentTime($(this).data('value'))
        console.log(newTime.getTime())
        localStorage.setItem('time-set',newTime.getTime())
        $('.time-setting').hide()
        if(timer){
            clearInterval(timer)
        }
        timer = setInterval(()=>{
            const endTime = localStorage.getItem('time-set')
            const now = new Date().getTime();
            const distance = endTime - now;
            if (distance < 0) {
                clearInterval(timer);
                localStorage.setItem('time-set',null)
                return;
            }
            // const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            // const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            $('.time-min').text(minutes)
            $('.time-second').text(seconds)
        },1000)
    })
</script>
</html>
